<template>
  <q-layout view='hHh LpR fFf'>

    <q-header reveal elevated class='bg-primary text-white'>
      <q-toolbar>
        <q-btn dense flat round icon='menu' @click='toggleLeftDrawer' />

        <q-toolbar-title>
          <q-avatar>
            <img alt='加载失败' :src='logo'>
          </q-avatar>
          物流管理系统
        </q-toolbar-title>

        <HeaderRight />

      </q-toolbar>
    </q-header>

    <q-drawer bordered show-if-above v-model='leftDrawerOpen' side='left' elevated :width='200'>
      <Sider />
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import Sider from 'components/Sider.vue';
import HeaderRight from 'components/HeaderRight.vue';
import _logo from 'assets/logo-white.svg';

const logo = _logo as string;

export default defineComponent({
  name: 'MainLayout',
  components: { HeaderRight, Sider },
  setup() {
    const leftDrawerOpen = ref(false);
    return {
      logo,
      leftDrawerOpen,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value;
      }
    };
  }
});
</script>
